/**
 * @Description: 短信配置
 * @author ruan
 * @date 2019年12月12日15:25:32
 */
import React, {Fragment} from 'react';
import {
  Button,
  Modal,
  Card,
  Checkbox,
  Col,
  Form,
  Input,
  Radio,
  Row,
  Select,
  Spin,
  Tag,
  BackTop,
  Tooltip,
  Icon,
  Switch,
  InputNumber,
  Typography,
  Divider,
} from 'antd';
import {formatMessage, FormattedMessage} from 'umi/locale';
import 'antd/dist/antd.css';
import PropTypes from 'prop-types';
import {connect} from 'dva';
import {requestLists, requestPromise} from '@/utils/request';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import ETable from '../../../components/ourslook/ETable';
import {getWebPath} from '../../../utils/request';
import uiUtils, {hasPermission, rulesReg, rulesRemote} from '../../../utils/uiUtils';
import styles from '../../../utils/ourslook.less';

const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;
const TextArea = Input.TextArea;
const Password = Input.Password;
const CheckboxGroup = Checkbox.Group;
const {Text} = Typography;
const isTrue = true;
const isFalse = false;

const getValue = obj =>
  Object.keys(obj)
    .map(key => obj[key])
    .join(',');

@connect(() => ({}))
@Form.create()
class CfgSms extends React.Component {
  params = {
    page: 1,
    limit: 10,
  };

  formItemLayout = {
    labelCol: {span: 5},
    wrapperCol: {span: 19},
  };

  constructor(props) {
    super(props);
    this.state = {cardLoading: false};
  }

  componentDidMount() {
    this.getSmsConfig();
  }

  componentWillUnmount() {
  }


  getBalance = type => {
    requestPromise(`${getWebPath(`/sys/config/sms/getBalance?type=${type}`)}`, {
      method: 'GET',
    }).then(res => {
      if (res && res.code === 0) {
        uiUtils.showAlert(`余额：${res.balance}`, "success");
      }
    });
  };

  getSmsConfig = () => {
    requestPromise(`${getWebPath('sys/config/sms/info')}`, {
      method: 'GET',
    }).then(res => {
      if (res && res.code === 0) {
        this.setState({smsConfigVo: res.data});
      }
    });
  };

  saveOrUpdate = () => {
    //不能双向绑定，这里只能原对象、新对象进行合并.
    const smsConfigVo = Object.assign(
      this.state.smsConfigVo,
      this.props.form.getFieldsValue()
    );

    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        // submit the values
        //对象删除一个属性
        //delete cfgZtinfoSms.xxxxPros;

        this.setState({
          cardLoading: true,
        });
        requestPromise(`${getWebPath()}sys/config/sms/save`, {
          method: 'POST',
          body: smsConfigVo,
        }).then(res => {
          this.setState({
            cardLoading: false,
          });
          if (res && res.code === 0) {
            uiUtils.showMessage(
              formatMessage({id: 'ours.curd.show-alert.operate-success'}),
              'success'
            );
          }
        });
      }
    });
  };

  render() {
    const ItemLayout = {
      labelCol: {span: 3},
      wrapperCol: {span: 20}, //5+19=24,少一个栅格
    };
    const formItemLayout = {
      labelCol: {span: 6},
      wrapperCol: {span: 17}, //5+19=24,少一个栅格
    };
    const colSpanLayout = {md: 24, sm: 24}; //每一col跨?列
    const rowGutterPxLayout = {md: 24, sm: 24}; //col之间的间隔?px
    const {
      form: {getFieldDecorator},
    } = this.props;
    const model = this.state.smsConfigVo || {};

    console.log(model);
    console.log(this.state);
    console.log(this.props.form.getFieldsValue());

    /* eslint-disable react/jsx-no-bind */
    return (
      <PageHeaderWrapper title="">

        <Spin spinning={this.state.cardLoading} delay={10}>
          <Card
            bordered={false}
            className={styles.oursCard}
            bodyStyle={{padding: '20px'}}
          >
            <h2>伊美短信</h2>
            <Col {...colSpanLayout}>
              <FormItem label="接口地址:" {...ItemLayout}>
                {getFieldDecorator('emayVo.host', {
                  initialValue: model.emayVo !== undefined ? model.emayVo.host : '',
                  rules: [],
                })(
                  <Input style={{width: 300}} type="text" placeholder="请输入接口地址"/>
                )}
              </FormItem>
            </Col>
            <Col {...colSpanLayout}>
              <FormItem label="APPID:" {...ItemLayout}>
                {getFieldDecorator('emayVo.appId', {
                  initialValue: model.emayVo !== undefined ? model.emayVo.appId : '',
                })(
                  <Input style={{width: 300}} type="text" placeholder="请输入APPID"/>
                )}
              </FormItem>
            </Col>
            <Col {...colSpanLayout}>
              <FormItem label="APPKEY:" {...ItemLayout}>
                {getFieldDecorator('emayVo.secretKey', {
                  initialValue: model.emayVo !== undefined ? model.emayVo.secretKey : '',
                })(
                  <Input style={{width: 300}} type="text" placeholder="请输入APPKEY"/>
                )}
              </FormItem>
            </Col>
            <Col {...colSpanLayout}>
              <div style={{marginLeft: 147, marginBottom: 15}}>
                <Button
                  size="small"
                  type="primary"
                  icon="pay-circle"
                  onClick={() => {
                    this.getBalance("emay");
                  }}
                  style={{marginRight: 20}}>
                  查询余额
                </Button>
                {/* eslint-disable-next-line react/jsx-no-target-blank */}
                <a href="http://www.b2m.cn/" target="_blank">官网</a>
              </div>
            </Col>
            <Divider dashed/>
            <h2>助通短信</h2>
            <Col {...colSpanLayout}>
              <FormItem label="终端账号:" {...ItemLayout}>
                {getFieldDecorator('zhuTongVo.userName', {
                  initialValue: model.zhuTongVo !== undefined ? model.zhuTongVo.userName : '',
                })(
                  <Input style={{width: 300}} type="text" placeholder="请输入终端账号"/>
                )}
              </FormItem>
            </Col>
            <Col {...colSpanLayout}>
              <FormItem label="终端密码:" {...ItemLayout}>
                {getFieldDecorator('zhuTongVo.password', {
                  initialValue: model.zhuTongVo !== undefined ? model.zhuTongVo.password : '',
                })(
                  <Input style={{width: 300}} type="text" placeholder="请输入终端密码"/>
                )}
              </FormItem>
            </Col>
            <Col {...colSpanLayout}>
              <div style={{marginLeft: 147, marginBottom: 15}}>
                <Button
                  size="small"
                  type="primary"
                  icon="pay-circle"
                  onClick={() => {
                    this.getBalance("zhutong");
                  }}
                  style={{marginRight: 20}}>
                  查询余额
                </Button>
                {/* eslint-disable-next-line react/jsx-no-target-blank */}
                <a href="http://www.ztinfo.cn/" target="_blank">官网</a>
              </div>
            </Col>
            <Divider/>
            <h2>系统启用短信平台</h2>
            <Col {...colSpanLayout}>
              <FormItem
                label="平台:"
                extra="说明：目前仅支持数据更改"
                {...ItemLayout}
              >
                {getFieldDecorator('type', {
                  initialValue: model.type === undefined ? "emay" : model.type,
                  rules: [
                    {
                      required: true,
                      message: '平台必选',
                    },
                  ]
                })(
                  <Radio.Group disabled defaultValue="emay">
                    <Radio value="emay">伊美短信</Radio>
                    <Radio value="zhutong">助通短信</Radio>
                    <Radio value="aliyunSms">阿里云短信</Radio>
                    <Radio value="yuntongxun">云通讯短信</Radio>
                  </Radio.Group>
                )}
              </FormItem>
            </Col>
            <Divider/>
            <Row gutter={{...rowGutterPxLayout}}>
              <Col {...colSpanLayout}>
                <Button type="primary" style={{marginTop: 20}} onClick={this.saveOrUpdate}>
                  <FormattedMessage id="storagesettings.basic.save" defaultMessage="保存设置"/>
                </Button>
              </Col>
            </Row>
          </Card>
        </Spin>
      </PageHeaderWrapper>
    );
  }
}

export default CfgSms;
